<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优化后的毛玻璃效果</title>
    <style>
        :root {
            /* 亮色主题变量 */
            --glass-bg-light: rgba(255, 255, 255, 0.3);
            --glass-border-light: rgba(255, 255, 255, 0.35);
            --glass-text-light: rgba(0, 0, 0, 0.8);
            --glass-shadow-light: rgba(142, 142, 142, 0.25);

            /* 暗色主题变量 */
            --glass-bg-dark: rgba(89, 89, 89, 0.3);
            --glass-border-dark: rgba(255, 255, 255, 0.15);
            --glass-text-dark: rgba(255, 255, 255, 0.8);
            --glass-shadow-dark: rgba(0, 0, 0, 0.3);

            /* 公共变量 */
            --glass-blur: 30px;
            --glass-radius: 12px;
            --glass-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        body {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #333;
            transition: var(--glass-transition);
        }

        body.dark {
            background: linear-gradient(135deg, #2c3e50 0%, #1a1a2e 100%);
            color: #fff;
        }

        /* 优化的毛玻璃基础类 */
        .glass {
            padding: 2rem;
            margin: 1rem;
            width: 300px;

            /* 基础玻璃效果 */
            backdrop-filter: blur(var(--glass-blur)) saturate(180%);
            -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
            border-radius: var(--glass-radius);

            /* 边框与阴影 */
            border: 1px solid;
            box-shadow:
                    0 8px 32px 0 var(--glass-shadow-light),
                    inset 0 0 12px rgba(255, 255, 255, 0.2);

            /* 过渡效果 */
            transition: var(--glass-transition);

            /* 文字样式 */
            font-family: 'Arial', sans-serif;
            text-align: center;
        }

        /* 亮色主题 */
        .glass.light {
            background-color: var(--glass-bg-light);
            border-color: var(--glass-border-light);
            color: var(--glass-text-light);
            box-shadow:
                    0 8px 32px 0 var(--glass-shadow-light),
                    inset 0 0 12px rgba(255, 255, 255, 0.2);
        }

        /* 暗色主题 */
        .glass.dark {
            background-color: var(--glass-bg-dark);
            border-color: var(--glass-border-dark);
            color: var(--glass-text-dark);
            box-shadow:
                    0 8px 32px 0 var(--glass-shadow-dark),
                    inset 0 0 12px rgba(0, 0, 0, 0.2);
        }

        /* 悬停效果 */
        .glass:hover {
            transform: translateY(-5px);
            box-shadow:
                    0 12px 40px 0 var(--glass-shadow-light),
                    inset 0 0 16px rgba(255, 255, 255, 0.3);
        }

        body.dark .glass:hover {
            box-shadow:
                    0 12px 40px 0 var(--glass-shadow-dark),
                    inset 0 0 16px rgba(0, 0, 0, 0.3);
        }

        /* 主题切换按钮 */
        .theme-toggle {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            cursor: pointer;
            border: none;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition: var(--glass-transition);
        }

        .theme-toggle:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }

        .theme-toggle svg {
            width: 24px;
            height: 24px;
        }

        /* 隐藏暗色图标初始状态 */
        .dark .theme-toggle .sun,
        .theme-toggle .moon {
            display: none;
        }

        .dark .theme-toggle .moon,
        .theme-toggle .sun {
            display: block;
        }
    </style>
</head>
<body>
<!-- 主题切换按钮 -->
<button class="theme-toggle" id="themeToggle">
    <svg class="sun" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
    </svg>
    <svg class="moon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
    </svg>
</button>

<!-- 亮色毛玻璃示例 -->
<div class="glass light">
    <h2>亮色毛玻璃效果</h2>
    <p>这是一个优化后的亮色毛玻璃效果，具有更好的透明度和立体感。</p>
</div>

<!-- 暗色毛玻璃示例 -->
<div class="glass dark">
    <h2>暗色毛玻璃效果</h2>
    <p>这是一个优化后的暗色毛玻璃效果，在暗色背景下依然清晰可见。</p>
</div>

<script>
    // 主题切换功能
    const themeToggle = document.getElementById('themeToggle');
    const body = document.body;

    // 检查本地存储中的主题偏好
    const currentTheme = localStorage.getItem('theme');
    if (currentTheme === 'dark') {
        body.classList.add('dark');
    }

    // 切换主题函数
    function toggleTheme() {
        body.classList.toggle('dark');

        // 保存主题偏好
        const isDark = body.classList.contains('dark');
        localStorage.setItem('theme', isDark ? 'dark' : 'light');
    }

    // 事件监听
    themeToggle.addEventListener('click', toggleTheme);
</script>
</body>
</html>